<template>
  <div class="app-container">


    <el-table v-loading="loading" :data="machineList">

      <el-table-column fixed label="序号" align="center">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum-1)*queryParams.pageSize+(scope.$index + 1)}} </span>
        </template>
      </el-table-column>
        <el-table-column label="菜品名称" align="center" prop="name" />
        <el-table-column label="单价 (元)" align="center" prop="price" />
         <el-table-column label="数量" align="center" prop = "count"/>

      <el-table-column label="图片" align="center" prop="photo" >
           <template slot-scope="scope">
<!--           <img :src="scope.row.photo" class="news-image"/>-->
             <image-preview :src="scope.row.photo" :width="50" :height="50"/>
           </template>
      </el-table-column>


    </el-table>
    </div>

</template>

<script>

import { getOrderDetail } from "@/api/food/food";


export default {
  name: "Data",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],

      group_ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 字典表格数据
      dataList: [],
      // 默认字典类型
      defaultDictType: "",

      groupId: '',

      machineList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 类型数据字典
      typeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictName: undefined,
        dictType: undefined,
        status: undefined
      },
      // 表单参数
      form: {}
    };
  },
  created() {
    const orderId = this.$route.params && this.$route.params.id;

    this.getList(orderId);
  },
  methods: {
    getList(orderId) {
       getOrderDetail(orderId).then(response => {
        this.machineList = response.data;
        this.loading = false;
      });
    },
  }
};
</script>
<style>
 .news-image {
    width: 50px;
    height: 50px;
  }
</style>
